<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Aether : Form Test Suit</title>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<link type="text/css" rel="stylesheet" href="http://github.com/jquery/jquery-ui/raw/1.9m1/themes/base/jquery.ui.all.css" />
	<link type="text/css" rel="stylesheet" href="./ui.formvalidation.css" />

	<style type="text/css">
		body {
			font-size: 62.5%;
			font-family: Verdana;
		}

		p {
			font-size: 1.1em;
		}

		pre,code {
			font-size: 1.2em;
		}

		input,
		textarea,
		select,
		label {
			position: relative;
			text-align: left;
			outline: 0;
			padding: .4em;
			margin-right: .4em;

			font-size: 1.1em;

			display: -moz-inline-stack;
			display: inline-block;
			zoom: 1;
			*display: inline;
		}

		input {
			width: 12em;
		}

	</style>

	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/ui/jquery.ui.position.js"></script>
	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/ui/jquery.ui.tooltip.js"></script>
	<script type="text/javascript" src="http://github.com/jquery/jquery-ui/raw/1.9m1/ui/jquery.ui.progressbar.js"></script>

	<script src="./ui.formvalidation.js" type="text/javascript"></script>

	<script type="text/javascript" src="http://jqueryui.com/themeroller/themeswitchertool/"></script>

	<script type="text/javascript">

		$(function() {
			$('<div/>').css({
				position: "absolute",
				right: 10,
				top: 10
			}).appendTo(document.body).themeswitcher();

			function enable() {
				$('.validate').formvalidation();
			}
			enable();

			$("#disable").toggle(function() {
				$("*").formvalidation("disable");
			}, function() {
				$("*").formvalidation("enable");
			});
			$("#toggle").toggle(function() {
				$("*").formvalidation("destroy");
			}, function() {
				enable();
			});
		});

	</script>
</head>

<body>

	<h3>Password Test</h3>

	<form action="form.htm" method="post" id="demo_form" class="validate">
		<ol>
			<li>
				<label for="name">Name</label>
				<input type="text" name="name" id="name" value="" required="required" />
			</li>
			<li>
				<label for="email">Email</label>
				<input type="email" name="email" id="email" value="" required="required" />
			</li>
			<li>
				<label for="enquiry">Enquiry</label>
				<textarea name="enquiry" id="enquiry"></textarea>
			</li>
			<li>
				<label><input type="checkbox" name="allow_contact" id="allow_contact" value="yes" /> Tick this box if you are OK to recieve messages from us in the future.</label>
			</li>
		</ol>

		<input type="submit"/>
	</form>

	<hr/>



	<div class="validate">
		<ol>
			<li>
				<label for="name">Name</label>
				<input type="text" name="name" id="name" value="" required="required" />
			</li>
			<li>
				<label for="email">Email</label>
				<input type="email" name="email" id="email" value="" required="required" />
			</li>
			<li>
				<label for="enquiry">Enquiry</label>
				<textarea name="enquiry" id="enquiry"></textarea>
			</li>
			<li>
				<label><input type="checkbox" name="allow_contact" id="allow_contact" value="yes" /> Tick this box if you are OK to recieve messages from us in the future.</label>
			</li>
		</ol>

		<input type="submit"/>
	</div>

	<hr/>

	<button id="disable">Toggle disabled</button>
	<button id="toggle">Toggle widget</button>

	<br />

	<br />

</body>
</html>